<style type="text/css">
	.layui-table-cell{
		height: auto;/* 表格高度自适应 */
	}
</style>

<fieldset class="layui-elem-field layui-field-title">
  <legend>分类列表</legend>
</fieldset>

<table id="list" lay-filter="list">
</table>

<script type="text/html" id="bar">
{{#
	if(d.status == 1){
}}
<a class="layui-btn  layui-btn-sm" lay-event="recover">恢复</a>
{{#
	}
}}
{{#
	if(d.status == 0){
}}
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
{{#
	}
}}
	<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">编辑</a>
</script>


<script type="text/html" id = "picture">
	{{#
	if(d.picture!=null){
		}}
		<img src="http://localhost:8888/upload/{{d.picture}}" >
		{{#
	}
	}}
</script>


<script type="text/html" id="edit">
	<form class="layui-form">
		<input type="hidden" name="id" />
		<div class="layui-form-item">
			<label class="layui-form-label">分类名称</label>
			<div class="layui-input-inline">
				<input type="text" name="name" class="layui-input" placeholder="请输入分类名" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">父分类</label>
			<div class="layui-input-inline">
				<select name="parent"></select>
			</div>
		</div>
		
		<div class="layui-form-item">
			<input type="hidden" name="picture" />
			<label class="layui-form-label">分类图片</label>
			<div class="layui-input-inline">
				<!-- 使用layui的图片上传 -->
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test1">上传图片</button>
				  <div class="layui-upload-list">
				    <img class="layui-upload-img" id="demo1" style="width: 92px; height: 92px;">
				    <p id="demoText"></p>
				  </div>
				  <div style="width: 95px;">
				    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
				      <div class="layui-progress-bar" lay-percent=""></div>
				    </div>
				  </div>
				</div>   
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-inline">
				<input class="layui-btn" type="submit" value="修改" lay-submit lay-filter="edit"/>
			</div>
		</div>
		
	</form>
</script>


<script type="text/javascript">
	layui.use(['table','form','upload','element'],function(){
		var table = layui.table;
		var form = layui.form;
		var upload = layui.upload;
		var element = layui.element;
		
		table.render({
			elem: '#list'
			,page: true//开启分页
			,height: 440
			,url: 'http://localhost:8888/api/goodsSorts' //数据接口
			,where:{parent:0}
			,cols: [[ //表头
		    {field: 'id', title: 'ID',width:100}
		    ,{field: 'name', title: '分类名'}
		    ,{field: 'picture', title: '图片',width:200,templet:'#picture'} 
			,{field: 'parent', title: '父级分类',templet: function(d){
					return d.parentSort==null ? '':d.parentSort.name;
				}}
			  ,{field: 'status', title: '状态',width:100,templet: function(d){
				  return ['正常','删除'][d.status];
			  }}
			  ,{title:'操作',toolbar:'#bar',width:150,fixed:'right'}
		    
		  ]],parseData: function(res){ //res 即为原始返回的数据
		  return {
		    "code": 0, //解析接口状态
		    "msg": res.msg, //解析提示文本
		    "count": res.data.total, //解析数据长度
		    "data": res.data.list //解析数据列表
		  };
		},
		done: function(res, curr, count){
						// 固定列高度适应
						$(".layui-table-main  tr").each(function (index ,val) {
							$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
						});
					}
		});
		
		table.on('tool(list)',function(obj){
			//判断
			if(obj.event=='delete'){
			  layer.confirm('真的要删除吗?',function(index){
				  layer.close(index);
				  $.ajax({
					  url:'http://localhost:8888/api/goodsSorts',
					  type:'delete',
					  data:{id:obj.data.id},
					  dataType:'json',
					  success:function(data){
						if(data.status == 204){
							layer.msg("删除成功");	
						}else if(data.status == 404){
							layer.msg(data.msg);
						}
						//刷新表格
						table.reload('list');
					  },error:function(){
						
					  }			  
				  });
				  
			  });
			}else if(obj.event=='recover'){
				layer.confirm('真的要恢复吗?',function(index){
				  layer.close(index);
				  $.ajax({
					  url:'http://127.0.0.1:8888/api/goodsSorts',
					  type:'delete',
					  data:{id:obj.data.id},
					  dataType:'json',
					  success:function(data){
						if(data.status == 204){
							layer.msg("恢复成功");	
						}else if(data.status == 404){
							layer.msg(data.msg);
						}
						//刷新表格
						table.reload('list');
					  },error:function(){
						
					  }			  
				  });
								  
				});
			}else if(obj.event=='edit'){
				
			//弹出窗口，表单
				var index = layer.open({
					type: 1,
					content: $('#edit').html()
				});
				
				//对表单的操作，渲染，都要写在open之后
				$("input[name='id']").val(obj.data.id);
				$("input[name='name']").val(obj.data.name);
				$("input[name='picture']").val(obj.data.picture); 
				if(obj.data.picture!=null){
					$("img#demo1").attr('src','http://127.0.0.1:8888/upload/'+obj.data.picture);
				}
				
				//获取当前的token
				var token =getCookie("token");
				
				//获取一级分类
				$.ajax({
					headers: {token:token}, //请求时，将token添加到请求头中
					url:'http://127.0.0.1:8888/api/goodsSorts',
					type:'get',
					data:{},
					dataType:'json',
					success:function(data){
						if( data.status == 200){
							var html="<option value=''>请选择父分类</option>"
							
							$.each(data.data.list,function(index,item){
								if(item.id == obj.data.parent){
									html+="<option value='"+item.id+"' selected=selected>"+item.name+"</option>"
								}else{
									html+="<option value='"+item.id+"'>"+item.name+"</option>"
								}
								
							})
							
							$("select[name='parent']").html(html);
							form.render();
							
						}else {
							
							layer.alert(data.msg,function(){
								window.location.href="login.html";
							});
							
						}
						
					},
					error:function(){
						
					}
				});
				
				//常规使用 - 普通图片上传
				 var uploadInst = upload.render({
				   elem: '#test1'
				   ,url: 'http://127.0.0.1:8888/api/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
				   ,before: function(obj){
					 //预读本地文件示例，不支持ie8
					 obj.preview(function(index, file, result){
					   $('#demo1').attr('src', result); //图片链接（base64）
					 });
					 
					 element.progress('demo', '0%'); //进度条复位
					 layer.msg('上传中', {icon: 16, time: 0});
				   }
				   ,done: function(res){
					 //如果上传失败
					 if(res.code > 0){
					   return layer.msg('上传失败');
					 }
					 //上传成功的一些操作
							  $("input[name='picture']").val(res.data)
					 //……
					 $('#demoText').html(''); //置空上传失败的状态
				   }
				   ,error: function(){
					 //演示失败状态，并实现重传
					 var demoText = $('#demoText');
					 demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					 demoText.find('.demo-reload').on('click', function(){
					   uploadInst.upload();
					 });
				   }
				   //进度条
				   ,progress: function(n, elem, e){
					 element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
					 if(n == 100){
					   layer.msg('上传完毕', {icon: 1});
					 }
				   }
				 });
				 
				 /**
				  * 请求修改
				  */
				form.on("submit(edit)",function(data){
					//layer.msg(JSON.stringify(data.field));
					//ajax
					$.ajax({
						url:'http://127.0.0.1:8888/api/goodsSorts',
						type:'put',
						data: JSON.stringify(data.field),
						contentType:'application/json; charset=utf-8',
						dataType:'json',
						success:function(data){
							//修改成功 
							if(data.status == 201){
								layer.msg("修改成功");
							}
							//修改失败
							else{
								layer.msg(data.msg);
							}
							layer.close(index);
							// 刷新表格
							table.reload('list')
							
						},
						error:function(){
							
						}
					});
					
					
					 
					return false;
				});
			}
		});

		
		
		
		  
	});
	</script>